<script lang="ts">
export default {
    props: {
        src: String,
        epsideoId: Number
    },
    emits: ['onPlayerEndedEmitted'],
    data() {
        return {
            fullscreen: false,
        }
    },
    methods: {
        // 播放结束自动切换集
        $onPlayerEnded() {
            this.$emit('onPlayerEndedEmitted')
        },
        // 全屏时切换横向展示
        $fullscreenChange() {
            this.fullscreen = !this.fullscreen
            plus.screen.lockOrientation(this.fullscreen ? 'landscape' : 'portrait-primary')
        },
    }
}
</script>

<script module="videojs" lang="renderjs">
export default {
  mounted() {
    // 初始化播放器
    if (typeof window.videojs === 'function') {
      this.initVideo()
    } else {
      // 创建标签引入videojs地址，加载完成执行初始化
      const script = document.createElement('script')
      script.src = 'https://cdn.bootcdn.net/ajax/libs/video.js/7.21.0/video.min.js'
      script.onload = this.initVideo.bind(this)
      document.head.appendChild(script)
    }
  },
  methods: {
    initVideo() {
      const oVideo = document.createElement('video')
      oVideo.id = 'xdclass_video'
      oVideo.style.width = '100%'
      oVideo.style.height = '100%'
      oVideo.className = 'video-js vjs-default-skin vjs-big-play-centered'
      const oVideoContainer = document.querySelector('#video_container')
      oVideoContainer.appendChild(oVideo)

      this.player = videojs(oVideo, {
        fill: true, // 填充模式
        controls: true, // 控制器
        playbackRates: [0.5, 1, 1.25, 1.5, 1.75, 2.0],
      })
      // 视频加载完毕准备播放触发
      this.player.on('loadedmetadata', this.onPlayerReady.bind(this))
      // 点击全屏触发
      this.player.on('fullscreenchange', this.onFullscreenChange.bind(this))
      // 视频播放结束触发
      this.player.on('ended', this.onPlayerEnded.bind(this))
      // 切换播放速度触发
      this.player.on('ratechange', this.onRateChange.bind(this))

      // 获取缓存中的播放速度
      this.playBackRate = localStorage.getItem('playBackRate') ? Number(localStorage.getItem('playBackRate')) : 1
      // 设置播放地址
      this.src && this.playSrc(this.src)
    },

    // 将加载好的视频资源执行播放
    onPlayerReady() {
      // 播放
      this.player.play()
      // 设置最新的播放速度
      this.player.playbackRate(this.playBackRate)
      // 已经在播放时才能更改
      this.speed=true
    },
    // 全屏
    onFullscreenChange() {
      this.$ownerInstance.callMethod('$fullscreenChange')
    },
    // 指定播放地址和类型
    playSrc(src) {
      this.player.src({ src, type: 'application/x-mpegURL' })
    },
     // 播放结束自动切换下一集
    onPlayerEnded() {
      // 获取上个组件实例中的方法
      this.$ownerInstance.callMethod('$onPlayerEnded')
      // 控制播放器播放结束执行播放速度置为1倍速
      this.speed=false
    },
    // 更改播放速度
    onRateChange() {
        // 只有视频播放时才能更改播放速度
        if(this.speed){
        // 播放速度存入缓存
        localStorage.setItem('playBackRate', this.player.playbackRate().toString())
        // 执行更改播放速度
        this.playBackRate = this.player.playbackRate()
        }
    },

    // 当播放地址更新,播放新的视频
    onChangeSrc(newValue) {
      if (newValue !== '' && this.player) {
        this.playSrc(newValue)
      } else {
        setTimeout(() => {
          this.playSrc(newValue)
        }, 500);
      }
      this.speed=false
    },
  },
}
</script>

<template>
    <view id="video_container" class="video-js w-full h-full" :src="src" :change:src="videojs.onChangeSrc"/>
</template>

<style>
@import 'https://cdn.bootcdn.net/ajax/libs/video.js/7.21.0/alt/video-js-cdn.min.css';
</style>
